<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>爱家-我的订单</title>
    <link href="/static/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link href="/static/plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet">
    <link href="/static/css/reset.css" rel="stylesheet">
    <link href="/static/plugins/bootstrap-datepicker/css/bootstrap-datepicker.min.css" rel="stylesheet">
    <link href="/static/css/ihome/main.css" rel="stylesheet">
    <link href="/static/css/ihome/orders.css" rel="stylesheet">
</head>
<body>
<div class="container">
    <div class="top-bar">
        <div class="nav-bar">
            <h3 class="page-title">客户订单</h3>
            <a class="nav-btn fl" href="{{ url_for('house_bp.my') }}"><span><i
                    class="fa fa-angle-left fa-2x"></i></span></a>
        </div>
    </div>
    <div class="orders-con">
        <ul class="orders-list">
            <li order-id=>
                {% for i in orders %}
                    <div class="order-title">
                        <!--<h3>订单编号：{{ i.id }}</h3>-->
                        <div class="fr order-operate">
                            <button type="button" class="btn btn-success order-accept" data-toggle="modal"
                                    data-target="#accept-modal">接单
                            </button>
                            <button type="button" class="btn btn-danger order-reject" data-toggle="modal"
                                    data-target="#reject-modal">拒单
                            </button>
                            <button type="button" class="btn btn-warning order-upload" data-order-id="{{ i.id }}">
                                上传合同
                            </button>
                        </div>
                    </div>
                    <div class="order-content">
                        <img src="">
                        <div class="order-text">
                            <!--<h3>{{ i.house_bp.title }}</h3>-->
                            <ul>
                                <li>创建时间：{{ i.create_time }}</li>
                                <li>入住日期：{{ i.begin_date }}</li>
                                <li>离开日期：{{ i.end_date }}</li>
                                <li>合计金额：￥{{ i.amount }}(共{{ i.days }}晚)</li>
                                <li>订单状态：
                                    <span>
                                        {% if i.status == 'WAIT_ACCEPT' %}
                                            未接单
                                        {% else %}
                                            已接单
                                        {% endif %}
                              </span>
                                </li>
                                <li>客户评价：
                                    {% if not i.comment %}
                                        客户未作出评价
                                    {% else %}
                                        {{ i.comment }}
                                    {% endif %}</li>
                            </ul>
                        </div>
                    </div>
                {% endfor %}
            </li>
        </ul>

        <!-- 接单模态框 -->
        <div class="modal fade" id="accept-modal" tabindex="-1" role="dialog" aria-labelledby="accept-label">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span>
                        </button>
                        <h4 class="modal-title">操作提示</h4>
                    </div>
                    <div class="modal-body">
                        <p>您确定接此订单吗？</p>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                        <button type="button" class="btn btn-primary modal-accept">确定接单</button>
                    </div>
                </div>
            </div>
        </div>

        <!-- 拒单模态框 -->
        <div class="modal fade" id="reject-modal" tabindex="-1" role="dialog" aria-labelledby="reject-label">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span>
                        </button>
                        <h4 class="modal-title">请输入拒接单原因</h4>
                    </div>
                    <div class="modal-body">
                        <textarea class="form-control" rows="3" id="reject-reason"
                                  placeholder="此处必须填写原因"></textarea>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                        <button type="button" class="btn btn-primary modal-reject">确定</button>
                    </div>
                </div>
            </div>
        </div>

        <!-- 上传合同模态框 -->
        <div class="modal fade modal-upload" id="upload-modal" tabindex="-1" role="dialog"
             aria-labelledby="upload-label">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span>
                        </button>
                        <h4 class="modal-title">上传合同</h4>
                    </div>
                    <div class="modal-body">
                        <input type="file" id="upload-contract" class="form-control"
                               accept=".pdf,.doc,.docx,.jpg,.png"/>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                        <button type="button" class="btn btn-primary" id="submit-upload">上传</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="footer">
        <p><span><i class="fa fa-copyright"></i></span>爱家租房&nbsp;&nbsp;享受家的温馨</p>
    </div>
</div>

<script src="/static/js/jquery.min.js"></script>
<script src="/static/plugins/bootstrap/js/bootstrap.min.js"></script>
<script src="/static/plugins/bootstrap-datepicker/js/bootstrap-datepicker.min.js"></script>
<script src="/static/plugins/bootstrap-datepicker/locales/bootstrap-datepicker.zh-CN.min.js"></script>
<script src="/static/js/template.js"></script>
<script>
    // 模态框居中的控制
    function centerModals() {
        $('.modal').each(function (i) {   // 遍历每一个模态框
            var $clone = $(this).clone().css('display', 'block').appendTo('body');
            var top = Math.round(($clone.height() - $clone.find('.modal-content').height()) / 2);
            top = top > 0 ? top : 0;
            $clone.remove();
            $(this).find('.modal-content').css("margin-top", top - 30);  // 修正原先已经有的30个像素
        });
    }

    $(document).ready(function () {
        // 模态框居中的控制
        function centerModals() {
            $('.modal').each(function (i) {   // 遍历每一个模态框
                var $clone = $(this).clone().css('display', 'block').appendTo('body');
                var top = Math.round(($clone.height() - $clone.find('.modal-content').height()) / 2);
                top = top > 0 ? top : 0;
                $clone.remove();
                $(this).find('.modal-content').css("margin-top", top - 30);  // 修正原先已经有的30个像素
            });
        }

        $('.modal').on('show.bs.modal', centerModals);  // 当模态框出现的时候
        $(window).on('resize', centerModals);

        $.ajax({
            url: '/order/lorder/',  // 获取订单数据
            type: 'GET',
            dataType: 'json',
            success: function (data) {
                orders = data.orders;
                all_order = '';
                // 遍历订单并生成订单列表
                for (i in orders) {
                    all_order += '<ul class="orders-list"><li order-id="' + orders[i].order_id + '"><div class="order-title">';
                    all_order += '<h3>订单编号：' + orders[i].order_id + '</h3>';

                    // 如果是待接单状态，显示接单和拒单按钮
                    if (orders[i].status === '待接单') {
                        all_order += '<div class="fr order-operate" id="button_' + orders[i].order_id + '"><button type="button" class="btn btn-success order-accept" data-toggle="modal" data-target="#accept-modal" order-id="' + orders[i].order_id + '">接单</button><button type="button" class="btn btn-danger order-reject" data-toggle="modal" data-target="#reject-modal">拒单</button></div>';
                    }

                    // 如果是已支付状态，显示上传合同或下载合同按钮
                    if (orders[i].status === '已支付') {
                        if (orders[i].contract_path) {
                            // 如果合同已上传，显示下载合同按钮
                            all_order += '<div class="fr order-operate"><button type="button" class="btn btn-info order-download" data-order-id="' + orders[i].order_id + '">下载合同</button></div>';
                        } else {
                            // 如果合同未上传，显示上传合同按钮
                            all_order += '<div class="fr order-operate" id="button_' + orders[i].order_id + '"><button type="button" class="btn btn-warning order-upload" data-order-id="' + orders[i].order_id + '">上传合同</button></div>';
                        }
                    }

                    all_order += '</div><div class="order-content">';
                    all_order += '<img src="/static/media/' + orders[i].image + '">';
                    all_order += '<div class="order-text"><h3>订单</h3>';
                    all_order += '<ul><li>创建时间：' + orders[i].create_date + '</li>';
                    all_order += '<li>入住日期：' + orders[i].begin_date + '</li>';
                    all_order += '<li>离开日期：' + orders[i].end_date + '</li>';
                    all_order += '<li>合计金额：' + orders[i].amount + '元(共' + orders[i].days + '晚)</li>';
                    all_order += '<li>订单状态：<span id="status_' + orders[i].order_id + '">' + orders[i].status + '</span></li></ul></ul>';
                }
                $('.orders-con').append(all_order);

                // 上传合同按钮点击事件
                $(".order-upload").on("click", function () {
                    var orderId = $(this).data("order-id");  // 获取 order-id
                    console.log("上传合同按钮被点击，订单ID为：" + orderId);  // 输出 orderId，方便调试
                    $(".modal-upload").attr("order-id", orderId);  // 在模态框中保存订单ID
                    $('#upload-modal').modal('show');  // 弹出上传合同模态框
                });

                // 下载合同按钮点击事件
                $(".order-download").on("click", function () {
                    var orderId = $(this).data("order-id");  // 获取订单ID
                    console.log("下载合同按钮被点击，订单ID为：" + orderId);  // 输出 orderId，方便调试
                    window.location.href = '/order/download_contract/' + orderId;  // 触发下载
                });
            },
            error: function (data) {
                alert('获取订单数据失败');
            }
        });


        // 上传合同功能
        $('#submit-upload').on('click', function () {
            var orderId = $(".modal-upload").attr('order-id');  // 获取订单ID
            console.log("提交上传，订单ID为：" + orderId);  // 输出订单ID，方便调试
            var formData = new FormData();
            var fileInput = $('#upload-contract')[0];

            if (fileInput.files.length === 0) {
                alert("请选择一个文件！");
                return;
            }

            formData.append('contract', fileInput.files[0]);
            formData.append('order_id', orderId);

            $.ajax({
                url: '/order/upload_contract/',  // 上传合同的后端接口
                type: 'POST',
                data: formData,
                contentType: false,  // 禁用内容类型设置
                processData: false,  // 禁用数据处理
                success: function (data) {
                    if (data.success) {
                        alert('合同上传成功！');
                        $('#upload-modal').modal('hide');
                        location.reload()
                    } else {
                        alert('合同上传失败，请重试');
                    }
                },
                error: function () {
                    alert('上传合同时发生错误');
                }
            });
        });
    });
    $(".order-reject").on("click", function () {
        var orderId = $(this).parents("li").attr("order-id");
        $(".modal-reject").attr("order-id", orderId);
    });

    $(".modal-accept").click(function () {
        var orderId = $('.order-accept').parents("li").attr("order-id");
        $.ajax({
            url: '/order/lorders/',
            type: 'PUT',
            dataType: 'json',
            data: {'order_id': orderId, 'status': 'WAIT_PAYMENT'},
            success: function (data) {
                alert('Success!')
                location.reload()
            },
            error: function (data) {
                alert('Error!')
            }
        })
    })

    $(".modal-reject").click(function () {
        var orderId = $('.order-reject').parents("li").attr("order-id");
        $.ajax({
            url: '/order/lorders/',
            type: 'PUT',
            dataType: 'json',
            data: {'order_id': orderId, 'status': 'REJECTED'},
            success: function (data) {
                alert('Success!')
                location.reload()
            },
            error: function (data) {
                alert('Error!')
            }
        })
    })
</script>
</body>
</html>
